<template>
  <div 
    class="rectangle-component"
    :style="rectangleStyles"
  />
</template>

<script>
import { defineProps, computed } from 'vue';

export default {
  name: 'RectangleComponent',
  props: {
    component: {
      type: Object,
      required: true,
      description: '矩形组件配置'
    },
    isPreview: {
      type: Boolean,
      default: false,
      description: '是否预览模式'
    }
  },
  setup(props) {
    // 矩形样式
    const rectangleStyles = computed(() => ({
      width: '100%',
      height: '100%',
      backgroundColor: props.component.backgroundColor || '#409eff',
      borderRadius: props.component.borderRadius ? `${props.component.borderRadius}px` : '0',
      border: props.component.borderWidth ? `${props.component.borderWidth}px solid ${props.component.borderColor || '#333333'}` : 'none',
      boxShadow: props.component.boxShadow || 'none',
      opacity: props.component.opacity !== undefined ? props.component.opacity : 1,
      // 支持渐变背景
      background: props.component.backgroundGradient ? 
        `linear-gradient(${props.component.gradientAngle || 0}deg, ${props.component.gradientColor1 || '#409eff'}, ${props.component.gradientColor2 || '#67c23a'})` : 
        'none'
    }));
    
    return {
      rectangleStyles
    };
  }
};
</script>

<style scoped>
.rectangle-component {
  box-sizing: border-box;
}
</style>
    